<template>
  <view>
    <view class="my-search-container" :style="{'background-color':bgcolor}">
      <view class="my-search-box" :style="{'border-radius':radius+'px'}" @click="searchBoxHandler">
        <uni-icons type="search" size="17"></uni-icons>
        <text style="margin-left: 5px;font-size: 14px">搜索</text>
      </view>

      <!--地图-->
      <view class="map">
        <uni-icons type="location-filled" size="32" color="white" @click="btnMap"></uni-icons>
      </view>

    </view>

    <view class="mapComponent" v-if="show">
      <view class="page-body">
        <view class="page-section page-section-gap">
          <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
          </map>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    name: "my-search",
    props: {
      //背景颜色
      bgcolor: {
        type: String,
        default: '#C00000'
      },
      //圆角尺寸
      radius: {
        type: Number,
        default: 20
      }
    },
    data() {
      return {
        show: false,
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 28.062057,
        longitude: 111.764466,
        covers: [{
          //这是俺的经纬度误差0-100m
          latitude: 28.021130,
        	 longitude: 111.723900,
        	 iconPath: '../../static/izumisakai1.jpg'
        }, {

          latitude: 28.021130,
          longitude: 111.723900,
        	 iconPath: '../../static/izumisakai1.jpg'
        }]
      };
    },

    methods: {
      //价格地图试试看
      btnMap() {
        this.show = !this.show;
        //this只想问题，这个有点搞心态···
        var that = this
        uni.getLocation({
          type: 'gcj02',
          //高精度定位属性  一点也不高精度。。。
          isHighAccuracy: true,
         //只要回调函数用这种方式写就行了 (res)=>{}  花里胡哨他喵的。。。
          success: function(res) {
            that.latitude = res.latitude
            that.longitude = res.longitude
            // that.covers[0].latitude=res.latitude
            // that.covers[0].longitude=res.longitude
            that.covers[1].latitude = res.latitude.toFixed(2)
            that.covers[1].longitude = res.longitude.toFixed(2)
          }

        });
      },

      //处理点击手速狂
      searchBoxHandler() {
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">
  .my-search-container {
    // background-color: #c00000;
    height: 50px;
    align-items: center;
    padding: 0 10px;
    display: flex;


    .my-search-box {
      display: flex;
      height: 36px;
      width: 100%;
      background-color: #FFF;
      align-items: center;
      justify-content: center;
      // border-radius: 20px;
    }

    //地图样式
    .map {
      margin-left: 20rpx;
    }
  }

  .mapComponent {
    z-index: 99;
    position: fixed;
    left: 0;
    top: 50;
    width: 100%;
    height: 500px;
  }
</style>
